<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="申请人">
        <el-input placeholder="请输入申请人" v-model="searchArr.userName"></el-input>
      </el-form-item>
      <el-form-item label="申请部门">
<!--&lt;!&ndash;        <el-radio-group v-model="searchArr.departmentId">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-radio border label="产品设计部" value="1" style="margin: 0"></el-radio>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-radio border label="业务销售部" value="0"></el-radio>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-radio-group>&ndash;&gt;-->
<!--        <el-select style="width: 150px" placeholder="请选择部门" v-model="searchArr.departmentId" >-->
<!--          <el-option label="部门1" value="101"></el-option>-->
<!--          <el-option label="部门2" value="102"></el-option>-->
<!--          <el-option label="部门3" value="103"></el-option>-->
<!--          <el-option label="部门4" value="104"></el-option>-->
<!--          <el-option label="部门5" value="105"></el-option>-->
<!--        </el-select>-->
        <el-input style="width: 150px" placeholder="请输入部门" v-model="searchArr.department" ></el-input>
      </el-form-item>
      <el-form-item label="供应商">
<!--&lt;!&ndash;        <el-input placeholder="请输入供应商" v-model="searchArr.supplierName"></el-input>&ndash;&gt;-->
<!--        <el-select style="width: 150px" placeholder="请选择供应商" v-model="searchArr.supplierId">-->
<!--&lt;!&ndash;          <el-option label="供应商1" value="101"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-option label="供应商2" value="102"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-option label="供应商3" value="103"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-option label="供应商4" value="104"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-option label="供应商5" value="105"></el-option>&ndash;&gt;-->
<!--            <el-option v-for="item in supplierArr"-->
<!--            :label="item.name" :value="item.id"></el-option>-->
<!--        </el-select>-->
        <el-input style="width: 150px" placeholder="请输入供应商" v-model="searchArr.supplier" ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select placeholder="请选择状态" style="width: 120px" v-model="searchArr.status">
          <el-option label="待审批" value="0"></el-option>
          <el-option label="审批通过" value="1"></el-option>
          <el-option label="审批拒绝"value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-date-picker
            type="datetimerange"
            v-model="searchArr.purchaseTime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            range-separator="至"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div class="button-container">
      <el-button type="primary" link @click="selectData">查询</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-card>


  <el-table :data="tableArr">
    <el-table-column align="center" label="编号" type="index" width="180px"></el-table-column>
    <el-table-column align="center" label="申请人" prop="userName"></el-table-column>
    <el-table-column align="center" label="申请部门" prop="department"></el-table-column>
    <el-table-column align="center" label="采购金额" prop="cost"></el-table-column>
    <el-table-column align="center" label="供应商" prop="supplier"></el-table-column>
    <el-table-column align="center" label="申请日期" prop="purchaseTime"></el-table-column>
    <el-table-column align="center" label="状态" prop="status"></el-table-column>
<!--    <el-table-column align="center" label="操作">-->
<!--      <template #default="scope">-->

<!--        <el-button type="primary" >查看详情</el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
  </el-table>


</template>


<script setup>

import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";




const supplierArr= ref([
  {name:'供应商1',id:'101'},
  {name:'供应商2',id:'102'},
  {name:'供应商3',id:'103'},
  {name:'供应商4',id:'104'},
  {name:'供应商5',id:'105'}
]);




//重置方法
const  reset=()=>{
  searchArr.value={};
 selectData();
}




const tableArr=ref([]);

const searchArr=ref({
  userName:'',
  departmentId:'',
  supplierId:'',
  status:'',
  purchaseTime:[]
});


const selectData=()=>{
  let data = qs.stringify(searchArr.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/purchaseApplication/select?'+data).then((response)=>{
    console.log(response.data.code);
    if (response.data.code==2000){
      ElMessage.success("查询成功！");
      tableArr.value=response.data.data;
       console.log(tableArr.value);
    }else {
      ElMessage.error(response.data.msg);
    }
  });
}

onMounted(()=>{
  selectData();
})

</script>


<style scoped>

</style>